<!--
  组件名称：弹出框地图界面
  组件作用：该组件为arcgis地图的封装，通过传入参数创建描点，点击描点可以在左侧或右侧依次展开数据显示面板
  作者：王禹
 -->
<template>
  <div id="overall" class="tundra">

    <!-- 地图容器 -->
    <div id="map" @mousemove="showCoordinates($event)" ></div>
    <button @click="centerZoom()" id="zoomCenter" class="btn btn-default" :class="{'hidden': false}"></button>
    <div :class="{panelViewRight:(panel.place=='right'),panelViewLeft:(panel.place=='left')}" v-for="panel in this.panelState" v-bind:key="panel.id" >
      <!-- 遍历传入组件，将所有组件初始化以备用 -->
      <div v-show="panel.isShow" >
        <!-- 使用淡入淡出效果 -->
        <transition name="component-fade" mode="out-in">
          <!-- 动态构建组件 -->
          <component :is="panel.component" :data="panel.data"></component>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
// 导入esri-loader用于加载地图组件
import EsriLoader from 'esri-loader'
export default {
  name: 'popupPanelMapView',
  data () {
    return {
      isShow: {},
      map: { loaded: '' },
      // 中心点
      centerPoint: {},
      // 弹出面板的状态
      panelState: {},
      // 描点的状态
      tracingPointState: {}
    }
  },
  // 在实例创建以后，初始化全部组件状态数据
  created: function () {
    // 初始化面板状态
    // 遍历面板数据
    this.panelState = { ...this.popupPanels }
    for (var i in this.panelState) {
      let panel = this.panelState[i]
      // 数据
      Vue.set(panel, 'data', {})
      Vue.set(panel, 'isShow', false)
    }
    // 初始化描点状态
    for (var i in this.tracingPointOptions) {
      let tracingPoint = this.tracingPointOptions[i]
      for (var i = 0; i < tracingPoint.datas.length; i++) {
        let tracingPointData = tracingPoint.datas[i]
        // 设定键
        this.tracingPointState[tracingPointData.id + 'Option'] = {}
        let tracingPointState = this.tracingPointState[
          tracingPointData.id + 'Option'
        ]
        // 经度
        tracingPointState['longitude'] = tracingPointData.longitude
        // 纬度
        tracingPointState['latitude'] = tracingPointData.latitude
        // 附加数据
        tracingPointState['additional'] = tracingPointData.additional
      }
    }
  },
  watch: {
    'map.loaded': function () {
      if (this.map.loaded == true) {
        this.isHide = false
        this.createCar() // 创建小车图标

        // 监听小车hover事件
        let imgCar = document.getElementById('tracingPointLayer_layer')
        let that = this // this在监听时已经改变了
        function evenStart (e) {
          // 获取id,附加数据,要弹出的面板id,面板触发方式
          let {
            id,
            additional,
            triggerPanelIds,
            triggerMode
          } = e.graphic.attributes

          triggerPanelIds.forEach(element => {
            let option = that.panelState[element]
            option['isShow'] = true
            option['data'] = additional[element]
            // 显示面板
            Vue.set(that.panelState, element, option)
          })
        }
        function evenEnd (e) {
          // 获取id,附加数据,要弹出的面板id,面板触发方式
          let {
            id,
            additional,
            triggerPanelIds,
            triggerMode
          } = e.graphic.attributes
          triggerPanelIds.forEach(element => {
            let option = that.panelState[element]
            option['isShow'] = false
            option['data'] = {}
            // 显示面板
            Vue.set(that.panelState, element, option)
          })
        }

        imgCar.addEventListener('mouseover', evenStart)
        imgCar.addEventListener('mouseout', evenEnd)
        imgCar.addEventListener('click', evenStart)
      }
    }
  },
  mounted: function () {
    // 监听EsriLoader是否存在，创建map
    if (!EsriLoader.isLoaded()) {
      // no, lazy load it the ArcGIS API before using its classes
      EsriLoader.bootstrap(
        err => {
          if (err) {
            console.error(err)
          } else {
            // once it's loaded, create the map
            this.createMap()
          }
        },
        {
          // use a specific version instead of latest 4.x
          url: 'https://js.arcgis.com/3.24/'
        }
      )
    } else {
      // ArcGIS API is already loaded, just create the map
      this.createMap()
    }
  },
  methods: {
    // 创建地图
    createMap: function () {
      EsriLoader.dojoRequire(
        [
          'esri/map',
          'esri/layers/ArcGISTiledMapServiceLayer',
          'esri/SpatialReference',
          'esri/geometry/Point',
          'dojo/domReady!'
        ],
        (Map, ArcGISTiledMapServiceLayer, SpatialReference, Point) => {
          // 创建描点
          this.centerPoint = new Point(
            // 经度
            114.30878471,
            // 纬度
            30.59122800,
            new SpatialReference({wkid: 4490}))
          this.map = new Map('map', {
            center: this.centerPoint,
            zoom: 10,
            logo: false
            // basemap: "osm"
          })
          var layer = new ArcGISTiledMapServiceLayer(
            'http://www.tiandituhubei.com:6080/arcgis/rest/services/IMG_ZY3_HB/MapServer'
          )
          this.map.addLayer(layer)
        }
      )
    },
    // 缩放到中心图层
    centerZoom: function () {
      this.map.centerAndZoom(this.centerPoint, 10)
    },
    // 根据传入数据创建描点图标
    createCar: function () {
      EsriLoader.dojoRequire(
        [
          'esri/map',
          'esri/layers/GraphicsLayer',
          'esri/graphic',
          'esri/geometry/Point',
          'esri/symbols/PictureMarkerSymbol',
          'esri/SpatialReference',
          'dojo/domReady!'
        ],
        (Map, GraphicsLayer, Graphic, Point, PictureMarkerSymbol, SpatialReference) => {
          // 获取描点图层
          if (this.map.getLayer('tracingPointLayer')) {
            // 删除图层
            this.map.removeLayer(this.map.getLayer('tracingPointLayer'))
          }
          let graphicLayer = new GraphicsLayer() // 创建图层
          graphicLayer.id = 'tracingPointLayer' // 设置图层id

          // 循环遍历描点配置
          for (let i = 0; i < this.tracingPointOptions.length; i++) {
            // 获取描点配置
            let tracingPointOption = this.tracingPointOptions[i]
            let triggerPanelIds = tracingPointOption.triggerPanelIds
            if (tracingPointOption.isSkip) {
              continue
            }
            // 图标
            let icon = new PictureMarkerSymbol(
              // 图标路径
              tracingPointOption.icon,
              // 宽度
              tracingPointOption.size.width,
              // 高
              tracingPointOption.size.heigth
            )
            // 遍历描点数据
            for (var i in tracingPointOption.datas) {
              let data = tracingPointOption.datas[i]
              // 创建描点
              let tracingPoint = new Point(
                // 经度
                data.longitude,
                // 纬度
                data.latitude,
                new SpatialReference({wkid: 4490}))

              // 创建绘制对象
              let graphic = new Graphic(tracingPoint, icon) // 创建图像
              graphic.attributes = {
                // id
                id: data.id,
                // 附加数据
                additional: data.additional,
                // 要弹出的面板id
                triggerPanelIds: triggerPanelIds,
                // 面板触发方式
                triggerMode: tracingPointOption.triggerMode
              }
              // 把图像添加到刚才创建的图层上
              graphicLayer.add(graphic)
            }
          }
          // 添加图层到地图
          this.map.addLayer(graphicLayer)
        }
      )
    },

    // 显示当前坐标
    showCoordinates: function (e) {
    }
  },
  components: {
    // panel: Panel
  },
  // 组建接受的传入参数
  props: [
    // 标题
    'title',
    // 地图数据来源
    'mapSourceUrl',
    // 地图数据类型
    'mapType',
    // 弹出面板组件集合（该参数为弹出面板组件集合，描述组件ID、组件对象、所在位置、弹出面板调用时回调函数（当触发弹出面板时调用，传入面板对象，触发方式，描点附带数据））
    'popupPanels',
    // 描点配置(该配置描述描点ID、应该使用的图标、图标大小、描点触发弹出面板的方式、附带数据)
    'tracingPointOptions'
  ]
}
</script>
<style>
@import url("http://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css");
@import url("http://js.arcgis.com/3.24/esri/css/esri.css");
@import "./../assets/css/overRall.css";
.panelViewRight {
  float:right;
  z-index: 3000;
  overflow: hidden;
  display: block;
  margin-top: 10px;
  margin-right: 10px;

}
.panelViewLeft {
  float:left;
  z-index: 3000;
  overflow: hidden;
  display: block;
  margin-top: 10px;
  margin-left: 10px;

}
</style>
